<template>
  <view>
    <bmap
      :longitude="longitude"
      :latitude="latitude"
      :markerName="projectAddressName"
      :mapKey="mapKey"
      :marker="marker"
      @changeMarker="changeMarker"
      @confirm="confirm"
      :polygons="polygons"
      :isPolygons="isPolygons"
      :isCustomBar="isCustomBar"
      :top="top"
    >
      <template v-slot:content>
        <slot name="content"></slot>
      </template>
    </bmap>
  </view>
</template>

<script>
import bmap from '../bmap/bmap.vue';
export default {
  name: 'atl-map',
  props: {
    longitude: {
      type: String,
      default: ''
    },
    latitude: {
      type: String,
      default: ''
    },
    projectAddressName: {
      type: String,
      default: ''
    },
    mapKey: {
      require: true,
      type: String,
      default: ''
    },
    marker: {
      type: Object,
      default: () => {}
    },
    mapType: {
      type: String,
      default: 'tmap'
    },
    disable: {
      type: Boolean,
      default: false
    },
    isPolygons: {
      type: Boolean,
      default: false
    },
    polygons: {
      type: Array,
      default: () => []
    },
    top: {
      type: [String, Number],
      default: 30
    },
    isCustomBar: {
      type: Boolean,
      default: false
    }
  },
  components: {
    bmap
  },
  data() {
    return {};
  },
  created() {
    // console.log(11, this.$props);
  },
  methods: {
    confirm(e) {
      this.$emit('confirm', e);
    },
    changeMarker(e) {
      this.$emit('changeMarker', e);
    }
  }
};
</script>

<style lang="scss" scoped></style>
